<template>
	<view class="collect">
		<view class="content">
			<view class="list" v-for="(v,i) in list" :key="i"  @click="godetail(v)">
				<view class="right">
					<view class="r_img">
						<image v-if="v.todata.image" :src="httpimg + v.todata.image" mode="aspectFill"></image>
					</view>
					<view class="r_text">
						<view class="title">
							{{v.todata.title}}
						</view>
						<view class="text_time">
							{{$formatDate(v.createtime*1000)}} 收藏
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="!list.length <= 0" :status="statusshow"></uni-load-more>
		<view class="kong" v-if="list.length==0">
			<view class="kong_img">
				<image src="../../static/mine/wushoucang.png" mode=""></image>
			</view>
			<view class="kong_text">
				还没有收藏，赶快去添加
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				httpimg: this.$httpimg,
				list: [],
				params: {
					mid: '',
					page: 1,
					limit: 10,
					type: 1
				},
				statusshow: 'loading'
			}
		},
		onShow() {
			if (uni.getStorageSync('user')) {
				this.params.mid = uni.getStorageSync('user').id
				this.params.page = 1
				this.list = []
				this.getlist()
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		methods: {
			godetail(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/index/details?id=${item.to_id}`
				})
			},
			getlist() {
				this.statusshow = 'loading'
				this.$post('user/myCollectList', this.params).then(res => {
					if (res.code == 0) {
						this.list.push(...res.data.list)
						this.statusshow = 'no-more'
					}
				})
			},
		}
	}
</script>

<style lang="less">
	image {
		width: 100%;
		height: 100%;
	}

	.collect {

		.content {
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.list {
				display: flex;
				align-items: center;
				margin-bottom: 26rpx;

				.right {
					display: flex;
					align-items: center;

					.r_img {
						width: 200rpx;
						height: 180rpx;
						border-radius: 14rpx;

						image {
							width: 100%;
							height: 180rpx;
							border-radius: 14rpx;
						}
					}

					.r_text {
						width: 400rpx;
						margin-left: 20rpx;
						box-sizing: border-box;

						.title {
							width: 100%;
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3; //几行就填几
							-webkit-box-orient: vertical;
						}

						.text_time {
							font-size: 30rpx;
							color: #555555;
							font-weight: 500;
							margin-top: 24rpx;
						}
					}
				}
			}
		}

		.kong {
			margin-top: 160rpx;

			.kong_img {
				width: 450rpx;
				height: 287rpx;
				margin: 0 auto;
			}

			.kong_text {
				color: #CCCCCC;
				text-align: center;
				font-size: 30rpx;
			}
		}
	}
</style>